import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { Button } from '../src';

<Meta title="MDX/Button" component={Button} />

<style>
  {`
    h2 {
      color: rgba(0, 0, 0, 0.88);
      font-weight: 500;
      font-family: Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
      font-size: 24px;
      line-height: 32px;
    }
    ul, ol {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul li {
      margin-left: 20px;
      padding-left: 4px;
      list-style-type: circle;
    }
  `}
</style>

# Button 按钮

按钮用于开始一个即时操作。

## 何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Storybook UI 中我们提供了两种按钮。

- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。

- 默认按钮：用于没有主次之分的一组行动点。

以及两种状态属性与上面配合使用。

- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。

- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

## 代码演示

export const Template = (args) => <Button {...args} />

<Canvas>
  <Story name="default"
    args={{
      label: "default button"
    }}
  >
  {Template.bind({})}
  </Story>
</Canvas>

<Canvas>
  <Story name="primary"
    args={{
      primary: true,
      label: "primary button"
    }}
  >
  {Template.bind({})}
  </Story>
</Canvas>

<Canvas>
  <Story name="loading"
    args={{
      loading: true,
      label: "Loading"
    }}
  >
  {Template.bind({})}
  </Story>
</Canvas>

## API

通过设置 Button 的属性来产生不同的按钮样式,按钮的属性说明如下：

<ArgsTable of={Button} />